<template>
  <div class="container">
    <n-page-header title="个人中心" />

    <div class="main">
      <n-h3 prefix="bar">基础功能</n-h3>
      <div class="action-panel">
        <n-grid
            :cols="userStore.role === 1 ? 6 : 4"
            :x-gap="12"
            :y-gap="12"
            responsive="screen"
            item-responsive>
          <n-gi :span="userStore.role === 1 ? '6 m:2' : '4 m:2'">
            <n-card class="action-card" :bordered="false" embedded hoverable @click="toMyMessage">
              <n-p>我的留言</n-p>
            </n-card>
          </n-gi>
          <n-gi :span="userStore.role === 1 ? '6 m:2' : '4 m:2'" v-if="userStore.role === 1" @click="toMyTopic">
            <n-card class="action-card" :bordered="false" embedded hoverable>
              <n-p>我的话题</n-p>
            </n-card>
          </n-gi>
          <n-gi :span="userStore.role === 1 ? '6 m:2' : '4 m:2'" @click="toMyWallet">
            <n-card class="action-card" :bordered="false" embedded hoverable>
              <n-p>我的钱包</n-p>
            </n-card>
          </n-gi>
        </n-grid>
      </div>

      <consult-settings class="action-model" v-if="userStore.role === 1" />
      <change-password class="action-model" />
      <profile-settings class="action-model" />
    </div>
  </div>
</template>

<script setup>

import {useRouter} from "vue-router";
import {useUserStore} from "@/stores/user.js";
import {ref} from "vue";
import {useIsMobile} from "@/common/composables.js";
import {useMessage, useNotification} from "naive-ui";
import {useRequests} from "@/common/requests.js";
import ProfileSettings from "@/components/user/ProfileSettings.vue";
import ConsultSettings from "@/components/user/ConsultSettings.vue";
import ChangePassword from "@/components/user/ChangePassword.vue";

const router = useRouter()
const userStore = useUserStore()

const requests = useRequests()
const message = useMessage()
const notify = useNotification()

const isMobile = useIsMobile()

const toMyWallet = () => {
  router.push({name: "UserWalletView"})
}

const toMyMessage = () => {
  router.push({name: 'MyMessageView'})
}

const toMyTopic = () => {
  router.push({name: 'MyTopicView'})
}
</script>

<style lang="scss" scoped>
.container {
  .main {
    margin-top: 1rem;

    .action-panel {
      .action-card {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .action-model {
      margin-top: 2rem;
    }
  }
}
</style>
